<template>
    <div>
        <div>
            <span class="mx-5 text-sm">日期</span>
            <el-date-picker
                v-model="filterState.date"
                type="date"
                placeholder="请选择日期"
                size="default"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />

            <span class="mx-8 text-sm">分店</span>
            <el-select v-model="filterState.shop" placeholder="分店名称" style="width: 200px">
                <el-option
                    v-for="item in shopLists"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>

            <span class="mx-8 text-sm">客户类型</span>
            <el-select v-model="filterState.customType" placeholder="客户类型" style="width: 200px">
                <el-option label="单次" value="单次"/>
                <el-option label="包月" value="包月"/>
                <el-option label="季度" value="季度"/>
                <el-option label="年度" value="年度"/>
            </el-select>
        </div>
        <div class="my-2">
            <span class="mx-5 text-sm">服务类型</span>
            <el-select v-model="filterState.service" placeholder="服务类型" style="width: 190px">
                <el-option
                    v-for="item in serviceOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>

            <span class="mx-8 text-sm">档期</span>
            <el-select v-model="filterState.serviceTime" placeholder="档期" style="width: 200px">
                <el-option label="上午8:00~10:00" value="上午8:00~10:00"/>
                <el-option label="上午10:30~12:30" value="上午10:30~12:30"/>
                <el-option label="下午2:00~4:00" value="下午2:00~4:00"/>
                <el-option label="下午4:30~6:30" value="下午4:30~6:30"/>
            </el-select>

            <span class="mx-8 text-sm">服务员工</span>
            <el-select v-model="filterState.serviceHumble" placeholder="服务员工" style="width: 200px">
                <el-option
                    v-for="item in serviceHumbleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-button type="primary" size="large" class="ml-12" style="width: 140px;" @click="handleFilter">筛选</el-button>
            <el-button type="success" size="large" class="ml-12" style="width: 140px;" @click="handleReset">重置</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, computed } from 'vue';
import instance from '@/api';
import { ElMessage } from 'element-plus';
import { useStaffStore } from '@/stores/useStaffStore';

const staffStore = useStaffStore()

interface FilterStateType {
  date: string;
  shop: string;
  customType: string;
  service: string;
  serviceTime: string;
  serviceHumble: string;
}
interface ServiceType {
  label: string;
  value: string;
}

const filterState = reactive<FilterStateType>({
  date: '',
  shop: '',
  customType: '',
  service: '',
  serviceTime: '',
  serviceHumble: ''
});

const serviceOptions = ref<ServiceType[]>([])

// 使用 staff store 中的员工数据
const serviceHumbleOptions = computed(() => {
  return staffStore.staffList.map((staff: { id: number; name: string }) => ({
    value: staff.id.toString(),
    label: staff.name
  }))
})
const shopLists = computed(() => {
    return staffStore.shopList.map((shop: { id:number; shop_name: string }) => ({
        value: shop.id,
        label: shop.shop_name
    }))
})

const emit = defineEmits(['upDateSearch']) //子组件传递给OrderInfo组件数据

async function handleFilter(){
    const resp = await instance.get('/api/order/searchOrder', { params:{...filterState} })
    const { status, data } = resp
    if(status === 200) {
        emit('upDateSearch', data)
    }else ElMessage.error('出错了')
}

function handleReset(){
    (Object.keys(filterState) as Array<keyof FilterStateType>).forEach(key => {
        filterState[key] = ''
    })
    handleFilter()
}

onMounted(async () => {
  staffStore.fetchStaffList()
  staffStore.fetchShopList()
  //获取服务类型
  const resp = await instance.get('/api/serviceType/lists')
  const { status, data } = resp
  if(status === 200) {
    const res = data.map((item: { id: number; service_type: string }) => ({
      value: item.service_type,
      label: item.service_type
    }))
    serviceOptions.value = res
  }
})
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
</style>